<script setup>
// 首页大组件
//顶部栏做了修改，添加了头像和logo
import store from "../store";
import swiper from "../components/swiper.vue";
import { replace, set } from "lodash";

console.log(store.state.act);
var changetype = function (str) {
  window.localStorage.setItem("policytype", str);
};
var searchroom = '';
var search = function () {
  localStorage.setItem("searchmsg", searchroom);
  console.log(localStorage.getItem("searchmsg"))
  store.searchMsg(searchroom)
}
var ToAll=function(){
  location.replace("../ListPage_all/ListPage_all.html")
}
var ToAll_act=function(){
  location.replace("../ListPage_all_act/ListPage_all_act.html")
}
</script>


<script>
//点击反馈事件
export default {
  data() {
    return {
      IStouch: "endtouch"
    };
  },
  methods: {
    starttouch(e) {
      e.currentTarget.className += ' starttouch';
    },
    remberIndex(index) {
      localStorage.setItem('index_', index)
    },
    endtouch(e) {
      e.currentTarget.className = 'hdtp'
    }
  }
};
</script>


<template>
  <div class="main">
    <!-- 顶部搜索栏：顶部固定 -->
    <div class="sousuolan">
      <div class="back">
        <img src="../assets/logo.jpg" alt="">
      </div>
      <input type="text" value class="search" v-model="searchroom" />
      <a href="../search/search.html" class="sousuo" @click="search()">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-sousuo" />
        </svg>
      </a>
      <div class="touxiang">
        <img :src="store.state.Stu[0].profile" alt />
      </div>
    </div>

    <!-- 轮播图 时间4s，自动轮播，淡入淡出，带小圆点和首尾连接，图片为强制填充满380*213-->
    <div class="lunbo">
      <div class="lunbotu">
        <swiper />
      </div>
    </div>
  <div class="zhengcechaxun">政策查询</div>
  <div class="toall" @click="ToAll()">查看全部</div>
  <!-- 政策类型，四个政策小图片 -->
  <div class="fenlei">
    <div>
      <a href="../scenic/scenic.html">
        <img src="../assets/scenic.png" alt />
        </a>
        <div class="jingqu">景区</div>
      </div>
      <div>
        <a href="../ListPage/ListPage.html" @click='changetype("教育政策")'>
          <img src="../assets/edu.png" alt />
        </a>
        <div class="jingqu">教育</div>
      </div>
      <div>
        <a href="../ListPage/ListPage.html" @click='changetype("就业政策")'>
          <img src="../assets/jobs.png" alt />
        </a>
        <div class="jingqu">就业</div>
      </div>
      <div>
        <a href="../ListPage/ListPage.html" @click='changetype("其他政策")'>
          <img src="../assets/medicine.png" alt class="medic" />
        </a>
        <div class="jingqu">其他</div>
      </div>
    </div>
    <div class="toall" style="top: 400px;" @click="ToAll_act()">查看全部</div>
    <!-- 各大活动  活动标题超过两行加省略号 文字12px-->
    <div class="dchd">多彩活动</div>
    <div class="huodonghezi">
      <div class="huodong" v-for="(item, index) in store.state.act.slice(0,12)" key="item" @click="remberIndex(index)">
        <div>
          <a href="../detailActive/ListPage.html" class="hdtp" :class="IStouch" @touchstart="starttouch"
            @touchend="endtouch">
            <img :src="item.cover" alt />
          </a>
          <div class="jieshao">{{ item.theme }}</div>
        </div>
      </div>
    </div>
    <!-- <div class="huodong" v-for="item in store.state.act" key="item">
            <div>
              <a href="#" class="hdtp">
                <img :src="item.cover" alt />
              </a>
              <div class="jieshao">{{item.theme}}</div>
            </div>
          </div> -->
    <div class="xian"></div>
    <div class="foot_f">
      相关网址：<br>中国退役军人网：www.tyjrchina.org.cn<br>中华人民共和国退役军人事务部：http://www.mva.gov.cn<br>陕西省退役军人事务厅：http://dva.shaanxi.gov.cn<br>西安市退役军人事务局：http://tyjrswj.xa.gov.cn
    </div>
    <div class="foot">@小弹壳官方：<br>联系我们1503490056@qq.com &nbsp&nbsp QQ：1503490056</div>
  </div>
</template>


<style scoped>
.main {
  background-color: #fbfbfb;
  padding-bottom: 95px;
  width: 100%;
}

.foot,
.foot_f {
  color: #414141;
  font-size: 12px;
  margin-top: 10px;
}

.foot {
  margin-top: 10px;
}

.toall {
  position: absolute;
  font-size: 12px;
  color: #414141;
  right: 4%;
  top: 280px;
}

.xian {
  margin-top: 20px;
  width: 97%;
  height: 1px;
  margin-left: 1.3%;
  background-color: #afafaf;
}

.touxiang {
  position: absolute;
  top: 9px;
  left: 5px;
  width: 30px;
  height: 30px;
  border-radius: 50px;
  overflow: hidden;
}

.touxiang>img {
  width: 100%;
  height: 100%;
}

.back {
  position: absolute;
  width: 25px;
  height: 25px;
  top: 9px;
  right: 8px;
}

.back>img {
  width: 100%;
  border-radius: 4px;
}

.huodong>div>a>img {
  max-width: 100%;
  height: auto;
}

.lunbo {
  margin-top: 50px;
  overflow: hidden;
  width: 100%;
  height: 213px;
  text-align: center;
  margin-left: 5px;
}

.lunbotu {
  border-radius: 10px;
}

.jingqu {
  font-size: 14px;
}

.search {
  width: calc(100% - 90px);
  height: 25px;
  color: gray;
  background-color: rgba(252, 252, 252, 0.5);
  padding-left: 7px;
  border-radius: 10px;
  margin-top: 8px;
}

.sousuo {
  position: absolute;
  top: 14px;
  right: 45px;
  /* background-color: black; */
  width: 40px;
  height: 19px;
  border-left: 1px solid pink;
  line-height: 19px;
}

.sousuolan {
  position: fixed;
  width: 100%;
  text-align: center;
  /* background-color: rgb(209, 199, 199, 0.5); */
  background-color: #fff;
  height: 42px;
  box-shadow: 0 0 5px #fbfbfb;
  /* border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px; */
  z-index: 99;
  /* border-bottom: 1px solid pink; */
}


.zhengcechaxun,
.dchd {
  margin-top: 14px;
  font-size: 16px;
  padding-left: 2px;
}

.fenlei {
  display: flex;
  justify-content: space-around;
  padding-top: 13px;
}

.fenlei>div>a>img {
  width: 100%;
  height: 100%;
}

.fenlei>div>a {
  display: block;
  overflow: hidden;
  width: 62px;
  height: 49px;
  border-radius: 10px;
  background-color: pink;
}

.fenlei>div>div {
  width: 62px;
  text-align: center;
  margin-top: 5px;
}


.huodonghezi {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  flex-grow: 1;
}

.huodong {
  width: 50%;
}

.huodong>div {
  margin-top: 10px;
  margin-left: 1.8%;
}

.huodong>div>div {
  width: 96.8%;
  text-align: center;
  margin-top: 7px;
}

.huodong>div>a {
  display: inline-block;
  width: 96.8%;
  height: 95px;
  border-radius: 10px;
  background-color: pink;
  overflow: hidden;
}

.jieshao {
  font-size: 12px;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.starttouch {
  box-shadow: 0 0 4px rgb(62, 62, 57);
}</style>
